<template>
  <view class="container">
    <view class="page-header">
      <view class="back-btn" @click="goBack">
        <text class="back-icon">&lt;</text>
        <text class="back-text">返回</text>
      </view>
      <view class="page-title">安全设置</view>
    </view>
    
    <view class="menu-list">
      <!-- 修改密码 -->
      <view class="menu-item" @click="goToChangePassword">
        <view class="menu-icon">
          <uni-icons type="locked" size="24" color="#007AFF"></uni-icons>
        </view>
        <view class="menu-content">
          <text class="menu-title">修改密码</text>
          <text class="menu-subtitle">定期更换密码可提高账号安全性</text>
        </view>
        <view class="menu-arrow">
          <uni-icons type="right" size="18" color="#BBBBBB"></uni-icons>
        </view>
      </view>
      
      <!-- 手机号绑定 -->
      <view class="menu-item" @click="goToPhoneBinding">
        <view class="menu-icon">
          <uni-icons type="phone" size="24" color="#007AFF"></uni-icons>
        </view>
        <view class="menu-content">
          <text class="menu-title">手机号绑定</text>
          <text class="menu-subtitle">绑定手机号用于找回密码等安全服务</text>
        </view>
        <view class="menu-arrow">
          <uni-icons type="right" size="18" color="#BBBBBB"></uni-icons>
        </view>
      </view>
      
      <!-- 账号注销 -->
      <view class="menu-item" @click="showAccountCancellationDialog">
        <view class="menu-icon">
          <uni-icons type="closeempty" size="24" color="#FF3B30"></uni-icons>
        </view>
        <view class="menu-content">
          <text class="menu-title">账号注销</text>
          <text class="menu-subtitle">注销后账号数据将被删除且无法恢复</text>
        </view>
        <view class="menu-arrow">
          <uni-icons type="right" size="18" color="#BBBBBB"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 可以添加页面所需的数据
    }
  },
  
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    
    // 跳转到修改密码页面
    goToChangePassword() {
      uni.navigateTo({
        url: '/pages/user/password'
      })
    },
    
    // 跳转到手机号绑定页面
    goToPhoneBinding() {
      // 如果没有相关页面，可以提示用户
      uni.showToast({
        title: '该功能正在开发中',
        icon: 'none'
      })
    },
    
    // 显示账号注销确认对话框
    showAccountCancellationDialog() {
      uni.showModal({
        title: '账号注销',
        content: '您确定要注销账号吗？注销后，账号数据将被删除且无法恢复！',
        confirmText: '确认注销',
        confirmColor: '#FF3B30',
        cancelText: '再考虑下',
        success: (res) => {
          if (res.confirm) {
            // 用户确认注销账号
            this.requestAccountCancellation()
          }
        }
      })
    },
    
    // 请求账号注销
    requestAccountCancellation() {
      // 这里可以调用账号注销的API
      // 如果没有相关API，可以提示用户
      uni.showToast({
        title: '该功能正在开发中',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
  position: relative;
}

.back-btn {
  display: flex;
  align-items: center;
  position: absolute;
  left: 0;
}

.back-icon {
  font-size: 36rpx;
  color: #007AFF;
}

.back-text {
  font-size: 28rpx;
  color: #007AFF;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  flex: 1;
  text-align: center;
}

.menu-list {
  background-color: #ffffff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .menu-item {
    display: flex;
    align-items: center;
    padding: 30rpx;
    position: relative;
    
    &:not(:last-child)::after {
      content: '';
      position: absolute;
      left: 30rpx;
      right: 30rpx;
      bottom: 0;
      height: 1rpx;
      background-color: #f0f0f0;
    }
    
    .menu-icon {
      margin-right: 20rpx;
    }
    
    .menu-content {
      flex: 1;
      
      .menu-title {
        font-size: 30rpx;
        color: #333;
      }
      
      .menu-subtitle {
        font-size: 24rpx;
        color: #999;
        margin-top: 6rpx;
      }
    }
    
    .menu-arrow {
      display: flex;
      align-items: center;
    }
  }
}
</style> 